<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="2" :offset="11"><div class="grid-content bg-white"><h1>注&nbsp;&nbsp;册</h1></div></el-col>
    </el-row>
    <el-form :model="Registerform" status-icon :rules="rules" ref="Registerform" label-width="80px" class="demo-Registerform">
      <el-row :gutter="20">
        <el-col :span="7" :offset="8">
          <div class="grid-content bg-white">
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="Registerform.userName"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="7" :offset="8">
          <div class="grid-content bg-white">
            <el-form-item label="密码" prop="userPwd">
              <el-input type="password" v-model="Registerform.userPwd" autocomplete="off"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="7" :offset="8">
          <div class="grid-content bg-white">
            <el-form-item label="确认密码" prop="checkPass">
              <el-input type="password" v-model="Registerform.checkPass" autocomplete="off"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="7" :offset="8">
          <div class="grid-content bg-white">
            <el-form-item label="邮箱" prop="userEmail">
              <el-input type="email" v-model="Registerform.userEmail" autocomplete="off"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="4" :offset="8">
          <div class="grid-content bg-white">
            <el-form-item prop="checkcode" label="验证码">
              <el-input></el-input>
            </el-form-item>  
          </div>
        </el-col>
        <el-image
          id="checkCodeImage"
          style="width: 100px; height: 50px"
          :src="url"
          @click="changeImg">
        </el-image>
        <i class="el-icon-refresh" style="position:absolute;margin-top:18px;margin-left:10px" @click="changeImg"></i>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="5" :offset="9">
          <div class="grid-content bg-white">
            <el-form-item>
              <el-button type="primary" @click="submitForm('Registerform')">提交</el-button>
              <el-button @click="resetForm('Registerform')">重置</el-button>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
      var checkUserName = (rule, value, callback) => {
        if (value==='') {
          return callback(new Error('用户名不能为空'));
        }
        setTimeout(() => {
            if (value.length>10) {
              callback(new Error('用户名过长'));
            } else {
              //发送异步请求
              axios.get("http://localhost:8080/accounts/checkUserName?userName="+value)
                  .then((result)=>{
                    if(result.data.msg==='success'){
                       callback();
                    }else if(result.data.msg==='UserNameIsRepeat'){
                        callback(new Error('用户名已存在'));
                    }
              })
            }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.Registerform.checkPass !== '') {
            this.$refs.Registerform.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.Registerform.userPwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        url:"http://localhost:8080/accounts/checkcodeimg",
        //注册表单属性
        Registerform: {
          userName:'',
          userPwd: '',
          checkPass: '',
          userEmail:'',
          imageUrl: ''
        },
        rules: {
          userPwd: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          userName: [
            { validator: checkUserName, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      changeImg(){
        this.url="http://localhost:8080/accounts/checkcodeimg?"+new Date().getMilliseconds();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //发送注册请求
            axios.post("http://localhost:8080/accounts/register",this.Registerform)
                 .then((result)=>{
                    if(result.data.code===1){
                      this.$message({
                        message: '注册成功',
                        type: 'success'
                      });
                      // console.log(this.Registerform);
                      //跳转至登录页面
                      this.$router.push('/login');
                    }else if(result.data.code===0){
                        this.$message.error('注册失败');
                    }
                 })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style>
 .el-row {
    margin-bottom: 10px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #ffffff;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
  }
  .avatar {
    width: 78px;
    height: 78px;
    display: block;
  }
</style>